<template>
  <el-dialog title="编辑" :model-value="visible" width="480px" :fullscreen="mobile" :close-on-click-modal="false">
    <el-form :model="form" ref="formRef" label-width="100px">
      <el-form-item label="名称" prop="number">
        <el-input v-model="form.faceLockName" placeholder="请输入门禁名称" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="SN" prop="number">
        <el-input v-model="form.faceLockSn" placeholder="请输入门禁SN号" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleOk" type="primary">保存</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="FaceLockEdit">
import useAppStore from '@/store/modules/app'
import {edit} from "@/api/device/faceLock.js";

const { proxy } = getCurrentInstance()

const emit = defineEmits()
const props = defineProps({
  row: {
    type: Object,
    default: () => {}
  },
  visible: {
    type: Boolean
  }
})
const groupOption = ref([])
const data = reactive({
  form: {
    faceLockId: undefined,
    faceLockName: undefined,
    faceLockSn: undefined,
  }
})
const { form } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')
watch(() => props.visible, value => {
  if (value) {
    form.value.faceLockId = props.row.faceLockId
    form.value.faceLockName = props.row.faceLockName
    form.value.faceLockSn = props.row.faceLockSn
  }
})

/* 取消 */
function handleCancel() {
  emit('cancel')
}
/* 提交保存 */
function handleOk() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      edit(form.value).then(res => {
        if (res.code === 200) {
          proxy.$message.success('保存成功')
          emit('ok', form.value)
        }
      })
    }
  })
}


/* 获取分组列表 */
async function getGoupOption() {
  groupOption.value = await proxy.$dictOption.groupDictOption()
}
getGoupOption()
</script>
